React용 스토리북 — 글로벌 및 애드온 및 스토리

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Storybook을 사용하면 다양한 매개변수를 사용하여 구성 요소의 프로토타입을 쉽게 만들 수 있습니다.

이 기사에서는 Storybook을 사용하여 전역과 작업하는 방법을 살펴보겠습니다.

스토리 내 글로벌 소비

스토리 내에서 전역을 소비할 수 있습니다.

이를 위해 우리는 스토리 함수에서 globals 속성을 얻습니다.

예를 들어 다음과 같이 작성할 수 있습니다.
.storybook/preview.js

export const globalTypes = {
  locale: {
    name: 'Locale',
    description: 'locale',
    defaultValue: 'en',
    toolbar: {
      icon: 'globe',
      items: [
        { value: 'en', right: '🇺🇸', title: 'English' },
        { value: 'fr', right: '🇫🇷', title: 'Français' },
        { value: 'zh', right: '🇨🇳', title: '中文' },
      ],
    },
  },
};

src/stories/Button.stories.js

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

const getCaptionForLocale = (locale) => {
  switch (locale) {
    case 'en': return 'Hello';
    case 'fr': return 'Bonjour';
    case 'zh': return '你好';
    default:
      return 'Hello'
  }
}

const Template = (args, { globals: { locale } }) => <Button {...{ ...args, label: getCaptionForLocale(locale) }} />;

locale 파일로 .storybook/preview.js 전역 변수를 정의했습니다.

그런 다음 src/stories/Button.stories.js 파일에서 매개변수의 locale 속성과 함께 globals.locale 전역 속성을 얻습니다.
right 속성은 데코레이터에 연결할 때 도구 모음 메뉴의 오른쪽에 표시되는 텍스트입니다.

애드온 내 전역 사용

애드온 파일 내에서 전역을 사용할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

import React from 'react';
import { useGlobals } from '@storybook/api';
import { addons, types } from '@storybook/addons';
import { AddonPanel, Spaced, Title } from '@storybook/components';

const LocalePanel = props => {
  const [{ locale }] = useGlobals();

  return (
    <>
      <style>
        {`
        #panel-tab-content > div > div[hidden] {
          display: flex !important
        }
      `}
      </style>
      <AddonPanel {...props}>
        <Spaced row={3} outer={1}>
          <Title>{locale}</Title>
        </Spaced>
      </AddonPanel>
    </>
  );
};

const ADDON_ID = 'locale-panel';
const PANEL_ID = `${ADDON_ID}/panel`;

addons.register(ADDON_ID, (api) => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'Locale',
    render: ({ active, key }) => {
      return <AddonPanel active={active} key={key}>
        <LocalePanel />
      </AddonPanel>
    },
  });
});

애드온을 추가하고 useGlobal 후크를 사용하여 전역 속성을 가져옵니다.
AddonPanel  , Spaced  , Title 속성을 사용하여 애드온 패널 내부에 콘텐츠를 표시합니다.
addons.register 메소드는 스토리북의 애드온 패널에 표시되도록 애드온을 등록합니다.

또한 패널을 렌더링할 AddonPanel가 있습니다.
style 태그가 있는 패널을 표시할 때 표시되도록 합니다.

스토리 렌더링

스토리가 렌더링되는 방식을 변경할 수 있습니다.
head 태그에 추가하기 위해 HTML 코드를 .storybook/preview-head.html 파일에 추가합니다.

<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
    crossorigin="anonymous">

그런 다음 iframe 내부의 head 태그에 표시됩니다.

결론

Storybook으로 애드온 패널을 추가할 수 있습니다.

또한 iframe의 head 태그 안에 태그를 추가할 수 있습니다.